大家好～今天要來做的是選擇影片類型的Dialog，會用到showDialog

AlertDialog (Flutter Widget of the Week)
Flutter dialog (1) - showDialog的讲解

showDialog顯示的東西可以是我們自己定義的一個Widget，DialogSelectCategory就是我建的StatefulWidget

 onTap: () {
    var result = showDialog(
        context: context,
        builder: (BuildContext context) {
            return DialogSelectCategory(
             searchLisCategory: "所有類型",
            );
          });
 },

先做好點擊的按鍵，一個是選節目或影片，一個是選內容類別
兩者都有GestureDetector監聽點擊事件，點擊時showDialog

Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    GestureDetector(
                      onTap: () {
                        //show dialog
                        var result = showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return DialogSelectCategory(
                                searchListType: "節目",
                              );
                            });
                      },
                      child: Row(
                        children: [
                          Text(
                            "節目",
                            style: TextStyle(fontSize: 20.0),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Icon(Icons.arrow_drop_down),
                          ),
                        ],
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        var result = showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return DialogSelectCategory(
                                searchLisCategory: "所有類型",
                              );
                            });
                      },
                      child: Row(
                        children: [
                          Text(
                            "所有類型",
                            style: TextStyle(
                                fontSize: 14.0,
                                color: Colors.white.withOpacity(0.7)),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(4.0),
                            child: Icon(Icons.arrow_drop_down),
                          ),
                        ],
                      ),
                    )
                  ],
                )

我的DialogSelectCategory

使用ListView顯示這些類別，

 Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 64.0),
              child: ListView(
                shrinkWrap: true,
                children: List.generate(
                    _list.length, (index) => _buildTitle(_list[index])),
              ),
            ),
          ),

我有設一個名叫selected的字串，在每次build的時候都判斷一下先前選擇的類別是不是跟傳進來的data一樣，如果是的話，它的字大小設為24.0，顏色是白色。否則字大小為20.0，顏色是白色但有一點透明

 String selected = "所有類型";

 _buildTitle(String data) {
    return Center(
        child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Text(
        data,
        style: TextStyle(
            fontSize: selected == data ? 24.0 : 20.0,
            color: selected == data
                ? Colors.white
                : Colors.white.withOpacity(0.6)),
      ),
    ));
  }

再疊一個取消Icon在屏幕下方就完成了，點擊時 Navigator.of(context).pop()返回頁面

Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: Icon(
                  Icons.cancel,
                  size: 64.0,
                ),
              ),
            ),
          )

今天之效果

GitHub連結： flutter-netflix-clone